<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ include file="../../common/base.jsp"%>
<%
	response.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="${path }/dist/css/bootstrap.css" rel="stylesheet">
<link href="${path }/dist/css/bootstrap-overrides.css" rel="stylesheet">

<!-- Button -->
<link href="${path }/dist/css/compiled/elements.css" rel="stylesheet">
<!-- libraries -->
<link rel="stylesheet" type="text/css"  href="${path }/dist/css/font-awesome.css">
<!-- this -->
<link rel="stylesheet" type="text/css" href="${path }/dist/css/app.css">
<!-- 右键菜单插件 -->
<link rel="stylesheet" type="text/css" href="${path }/dist/css/smartMenu.css">
<link rel="stylesheet" type="text/css" href="${path }/back/ifrom.css">


<script src="${path }/dist/js/jquery.min.js"></script>
<script src='${path }/dist/js/bootstrap.min.js'></script>
<script src='${path }/dist/js/jquery-smartMenu.js'></script>
<style type="text/css">
.nav-header {
	display: block;
	padding: 3px 15px;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	color: #999;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}
#firstRow{
	padding: 3px;
}

.my_modal{
	position: absolute;
	height: 200px;
	width: 300px;
	display:none;
	left: 30%;
	top: 10%;
}
.my_input {
  
  width: 150px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.my_input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
</style>
</head>
<body>
<div id="pad-wrapper">
	<div class="row head">
	<div class="col-md-12">
			<h3>设置供应商</h3>
			</div>
	</div>
	<div class="row">
		<div class="panel panel-success table-wrapper users-table">
				<div class="panel-heading" >
				
				<span>请使用左键菜单操作</span>
				</div>
			
				<table class="table table-hover">
						<thead>
							<tr >
								<th class="col-md-1 sortable" ><span >名称</span ></th>
								<th class="col-md-2 sortable" ><span class="line"></span><span >地址</span></th>
								<th class="col-md-1 sortable"> <span class="line"></span><span >联系人</th>
								<th class="col-md-2 sortable"> <span class="line"></span><span >电话</th>
								<th class="col-md-2 sortable"> <span class="line"></span><span >传真</th>
							</tr>
						</thead>
						<tbody id="node_tbody">
							<c:forEach var="l" items="${basisList}">
								<tr data-id='${l.id }'>
									<td>${l.suppliers_name }</td>
									<td>${l.suppliers_address }</td>
									<td>${l.suppliers_contacts }</td>
									<td>${l.suppliers_phone }</td>
									<td>${l.suppliers_fax }</td>
								</tr>
							</c:forEach>
							<c:if test="${fn:length(basisList)==0}">
								<tr> <td colspan="5">没有记录，右键新增</td></tr>
							</c:if>
						</tbody>
				</table>				
				
			
		</div>
	</div>
</div>
<div class="my_modal" id="edit_modal">
	<form action="" method="post" id="edit_supplier_form">
	    <div class="modal-content ">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="hideMenu()"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">增加供应商</h4>
	      </div>
	      <div class="modal-body">
	      	<table class="table table-bordered table-hover">
					<tbody>
						<tr><td class="title"><span style="color: #f00;">*</span>名称：</td>
							<td><input type="text" class="form-control input-sm" name="suppliers.suppliers_name" data-vail/></td>
						</tr>
						<tr><td class="title">地址：</td>
							<td><input type="text" class="form-control input-sm" name="suppliers.suppliers_address"/></td>
						</tr>
						<tr><td class="title"><span style="color: #f00;">*</span>联系人：</td>
							<td><input type="text" class="form-control input-sm" name="suppliers.suppliers_contacts"  data-vail/></td>
						</tr>
						<tr><td class="title" ><span style="color: #f00;">*</span>电话：</td>
							<td><input type="text" class="form-control input-sm" name="suppliers.suppliers_phone" data-vail/></td>
						</tr>
						<tr><td class="title">传真：</td>
							<td><input type="text" class="form-control input-sm" name="suppliers.suppliers_fax"  /></td>
						</tr>
					</tbody>
				</table>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" onclick="hideMenu()">Close</button>
	        <button type="button" class="btn btn-primary" id="edit_supplier_form_submit">确认提交</button>
	      </div>
	    </div>
	  </form>
</div>
<script type="text/javascript">
var tdmenuData=[
                [{text: "新增", func:add },
                 {text: "修改", func:edit },
                 {text: "删除", func:remove },
                ],[{text: "取消",func:canecloper}]
               ];
function add(){
	$("#edit_modal input[type='text']").each(function(i){//清空
		$(this).val("");
	});
	$("#myModalLabel").html("增加供应商");
	$("#edit_modal").fadeIn("fast");
	$("#edit_supplier_form_submit").unbind("click");
	$("#edit_supplier_form_submit").bind("click",add_supplier);
	
}
function edit(){
	$("#myModalLabel").html("修改供应商");
	//值回填
	$("td",$(this)).each(function(i){//赋值
		$("#edit_modal input[type='text']").eq(i).val($(this).html());
	});
	
	$("#edit_modal").fadeIn("fast");
	$("#edit_supplier_form_submit").unbind("click");
	$("#edit_supplier_form_submit").bind("click",{id:$(this).data("id")},edit_supplier);
}
function remove(){
	var  from_data=[{name:"id",value:$(this).data("id")}];
	var saveURL = "${path}/back/basis!delsuppliers?date="+new Date()+"";
	jQuery.post(saveURL,from_data,function(jsonData){
		if(jsonData.info){
			alert(jsonData.text);
		 	window.location.reload();
		}else{
			alert("删除失败：原因\n"+jsonData.text);
		}
	},"json");
}
function canecloper(){
	return true;
}   
function add_supplier(){
	var formDom=$(this).closest("form");
	if(fromisnotnull(formDom)){
		var form_data=formDom.serializeArray();
		/* $.each(form_data,function(i,j){
			alert(j.name+":"+j.value);
		}); */
		var saveURL = "${path}/back/basis!addsuppliers?date="+new Date()+"";
		jQuery.post(saveURL,form_data,function(jsonData){
			if(jsonData.info){
				alert(jsonData.text);
			 	window.location.reload();
			}else{
				alert("添加失败：原因\n"+jsonData.text);
			}
		},"json");
	} 
}
function edit_supplier(e){
	var formDom=$(this).closest("form");
	if(fromisnotnull(formDom)){
		// alert(e.data.id);
		var form_data=formDom.serializeArray();
		form_data.push({name:"suppliers.id",value:e.data.id});
/* 			$.each(form_data,function(i,j){
			alert(j.name+":"+j.value);
		});  */
		var saveURL = "${path}/back/basis!editsuppliers?date="+new Date()+"";
		jQuery.post(saveURL,form_data,function(jsonData){
			if(jsonData.info){
				alert(jsonData.text);
			 	window.location.reload();
			}else{
				alert("修改失败：原因\n"+jsonData.text);
			}
		},"json");
	} 
}

$(document).ready(function() {
	$("#node_tbody tr").smartMenu(tdmenuData,{name:"tdmenu"});	
});

//解除 body绑定
function hideMenu() {
	$("#edit_modal").fadeOut("fast");
}
function fromisnotnull(formdom){
	var  pass =true;
	$("input[type='text'][data-vail]",formdom).each(function(){
		if($(this).val()==null||$(this).val()==""){
			alert("*为必填项");
			pass =false;
			return false;
		}
	});
	return pass;
}
</script>
</body>
</html>